<script setup>
import { computed,ref,onMounted } from "vue";
import { useStore } from 'vuex';
import axios from 'axios';

// 定义 onClickLeft 方法
const onClickLeft = () => {
  history.back();
};
let notes = ref([]);
const store = useStore();
let user = computed(() => store.getters.getUser);

let datainit = () => {
  user=computed(() => store.getters.getUser);
  axios.post('/admin/notes/getNoteByUserId',{userId: user.value.userId}).then(res=>{
    notes.value = res.data.date;
  });
}
onMounted(() => {
  datainit();
});
const formatPublishTime = (dateString) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

const dialogVisible = ref(false);
const noteToDelete = ref(null);

const confirmDelete = (item) => {
  noteToDelete.value = item;
  dialogVisible.value = true;
};

const handleDelete = () => {
  if (noteToDelete.value) {
    axios.delete('/admin/notes/delete/'+noteToDelete.value.noteId).then(res => {
      datainit(); // 刷新笔记列表
      dialogVisible.value = false;
    }).catch(error => {
      console.error("Error deleting note:", error);
      dialogVisible.value = false;
    });
  }
};
</script>

<template>
  <van-nav-bar
      title="笔记列表"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
  />
  <van-cell-group>
    <van-cell v-for="item in notes" :key="item.noteId" >
      <van-row>
        <van-col span="2">
          <van-image :src="user.profilePicture" :show-delete="false" :style="{ width: '10vw' }" />
        </van-col>
        <van-col span="10">
          <van-field v-model="user.username" label="" placeholder="" readonly />
        </van-col>
        <van-col span="8">

        </van-col>
        <van-col span="4">
          <div>{{ formatPublishTime(item.publishTime) }}</div>
        </van-col>
      </van-row>
      <van-image :src="item.imagePath" />
      <van-field v-model="item.content" label="" placeholder="" readonly />
      <van-row align="center">
        <van-col span="8" align="center">
          点赞
        </van-col>
        <van-col span="8" align="center">
          回复
        </van-col>
        <van-col span="8" align="center" @click="confirmDelete(item)">
          删除
        </van-col>
      </van-row>
    </van-cell>
  </van-cell-group>

  <van-dialog
      v-model:show="dialogVisible"
      title="确认删除"
      message="确定要删除此笔记吗？"
      @confirm="handleDelete"
      @cancel="dialogVisible = false"
  />
</template>

<style scoped>
</style>